<template>
    <div class="jcdManagement">
        <div class="t_fm">
            <el-form :inline="true" :model="form" label-suffix=":">
                <el-form-item label="调查年份">
                    <el-date-picker v-model="form.jcsj" type="year" value-format="yyyy" :clearable="false">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="图斑编号">
                    <el-input v-model="form.tbbh" placeholder="图斑编号"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="图斑编号"> </el-table-column>
            <el-table-column prop="province" label="经度"> </el-table-column>
            <el-table-column prop="city" label="纬度"> </el-table-column>
            <el-table-column prop="address" label="海拔" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="草资源类型"> </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleadd(scope.row)" type="primary" size="small">录入</el-button>
                    <el-button @click="handleDelete(scope.$index, tableData)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: "jcdManagement",
    data() {
        return {
            form: {
                tbbh: '',
                jcsj: new Date(),
            },
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1518 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1517 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1519 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1516 弄",
                    zip: 200333,
                },
            ],
        };
    },
    methods: {
        handleadd() {
            console.log(this.form);
            this.$router.replace(this.$route.path + '/data')
        },
        handleEdit(row) {
        },
        handleDelete(index, rows) {
            this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rows.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        }
    },
};
</script>